<template>
  <div>
	<a-button type="primary" @click="openAddModal" style="margin-bottom:10px;">添加</a-button>
    <a-table :columns="buildingDistanceColumns" :data-source="buildingDistanceData" row-key="key">
     <span slot="action" slot-scope="text, record">
     	<span
     		style="color: #028BE2; cursor:pointer; margin-right: 20px;"
     		@click="openEditModal(record)">编辑</span>
     	<span style="color: #028BE2; cursor:pointer; margin-right: 20px;"	@click="deleteBuildingDistance(record.key)">删除
     	</span>	
     </span>
    </a-table>
    
    <a-modal
      :visible="modalVisible"
      title="教学楼间距信息"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
        <div>
          <div>
            <span>教学楼: </span>
            <a-input v-model="currentRecord.buildingName" />
          </div>
          <div>
            <span>1号教学楼距离: </span>
            <a-input v-model="currentRecord.distanceToA" />
          </div>
          <div>
            <span>2号教学楼距离: </span>
            <a-input v-model="currentRecord.distanceToB" />
          </div>
        </div>
    </a-modal>
  </div>
</template>

<script>

export default {
  data() {
    return {
      buildingDistanceColumns: [
        {
          title: '教学楼',
          dataIndex: 'buildingName',
          key: 'buildingName'
        },
        {
          title: '1号教学楼距离',
          dataIndex: 'distanceToA',
          key: 'distanceToA'
        },
        {
          title: '2号教学楼距离',
          dataIndex: 'distanceToB',
          key: 'distanceToB'
        },
       {
         title: '操作',
         dataIndex: 'action',
         key: 'action',
         width: 220,
         scopedSlots: {
         	customRender: 'action'
         }
       }
      ],
      buildingDistanceData: [
        {
          key: '1',
          buildingName: '1号教学楼',
          distanceToA: 0,
          distanceToB: 500,
          isEditing: false
        },
        {
          key: '2',
          buildingName: '2号教学楼',
          distanceToA: 500,
          distanceToB: 0,
          isEditing: false
        }
      ],
      modalVisible: false,
      currentRecord: {
        key: null,
        buildingName: '',
        distanceToA: '',
        distanceToB: '',
        isEditing: false
      },
      isAdding: false
    };
  },
  methods: {
    openAddModal() {
      this.isAdding = true;
      this.currentRecord = {
        key: null,
        buildingName: '',
        distanceToA: '',
        distanceToB: '',
        isEditing: false
      };
      this.modalVisible = true;
    },
    openEditModal(record) {
      this.isAdding = false;
      this.currentRecord = { ...record };
      this.modalVisible = true;
    },
    handleModalOk() {
      const isDistanceAValid =!isNaN(parseFloat(this.currentRecord.distanceToA)) && isFinite(this.currentRecord.distanceToA);
      const isDistanceBValid =!isNaN(parseFloat(this.currentRecord.distanceToB)) && isFinite(this.currentRecord.distanceToB);

      if (this.isAdding) {
        const newKey = String(Number(this.buildingDistanceData[this.buildingDistanceData.length - 1].key) + 1);
        this.buildingDistanceData.push({
          key: newKey,
          buildingName: this.currentRecord.buildingName,
          distanceToA: parseFloat(this.currentRecord.distanceToA),
          distanceToB: parseFloat(this.currentRecord.distanceToB),
          isEditing: false
        });
      } else {
        const index = this.buildingDistanceData.findIndex(item => item.key === this.currentRecord.key);
        if (index!== -1) {
          this.buildingDistanceData[index] = {
            ...this.buildingDistanceData[index],
            buildingName: this.currentRecord.buildingName,
            distanceToA: parseFloat(this.currentRecord.distanceToA),
            distanceToB: parseFloat(this.currentRecord.distanceToB)
          };
        }
      }
      this.modalVisible = false;
    },
    handleModalCancel() {
      this.modalVisible = false;
    },
    deleteBuildingDistance(key) {
      this.buildingDistanceData = this.buildingDistanceData.filter(item => item.key!== key);
    }
  }
};
</script>

<style scoped>
/* 可以添加一些样式 */
</style>